sugarss

What is sugarss?

SugarSS is a syntax parser for PostCSS that allows you to write your CSS in a more minimalistic and readable format, similar to Sass or Stylus. It simplifies the CSS syntax by removing braces, semicolons, and enabling indentation-based scoping.

What are sugarss's main functionalities?

Indentation-based Syntax

SugarSS allows you to write CSS rules using indentation instead of braces, making the CSS more readable and concise.

.one
  color: blue
  .two
    color: red

Semicolon-free

You can omit semicolons in SugarSS, simplifying the syntax further and making it cleaner.

.example
  background: white
  color: black

Compatibility with PostCSS

SugarSS is compatible with PostCSS, allowing you to use it alongside a wide range of PostCSS plugins for added functionality.

postcss([ require('sugarss') ]).process(css, { parser: 'sugarss' })

Other packages similar to sugarss

sass

Sass is a mature, stable, and powerful professional grade CSS extension language that is very similar to SugarSS in providing a more simplified and efficient way to write CSS. It offers more features like variables, mixins, and functions which SugarSS does not.

stylus

Stylus is another robust preprocessor that offers a syntax similar to SugarSS with optional braces and semicolons. It provides additional features like variable interpolation and powerful built-in functions, making it more feature-rich compared to SugarSS.

less

Less is a backward-compatible language extension for CSS. Like SugarSS, it simplifies CSS coding but also includes features like variables, mixins, and functions, which are not present in SugarSS.

README

SugarSS

Indent-based CSS syntax for PostCSS.

a
  color: blue

.multiline,
.selector
  box-shadow: 1px 0 9px rgba(0, 0, 0, .4),
              1px 0 3px rgba(0, 0, 0, .6)

// Mobile
@media (max-width: 400px)
  .body
    padding: 0 10px

As any PostCSS custom syntax, SugarSS has source map, stylelint and postcss-sorting support out-of-box.

It was designed to be used with PreCSS and postcss-nested-props. But you can use it with any PostCSS plugins or use it without any PostCSS plugins. With gulp-sass-to-postcss-mixins you can use +mixin syntax as in Sass.

Syntax

SugarSS MIME-type is text/x-sugarss with .sss file extension.

Indent

We recommend 2 spaces indent. However, SugarSS autodetects indent and can be used with tabs or spaces.

But it is prohibited to mix spaces and tabs in SugarSS sources.

Multiline

SugarSS was designed to have intuitively multiline selectors and declaration values.

There are 3 rules for any types of nodes:

// 1. New line inside brackets will be ignored
@supports ( (display: flex) and
            (display: grid) )

// 2. Comma at the end of the line
@media (max-width: 400px),
       (max-height: 800px)

// 3. Backslash before new line
@media screen and \
       (min-width: 600px)

In selector you can put a new line anywhere. Just keep same indent for every line of selector:

.parent >
.child
  color: black

In declaration value you can put new line anywhere. Just keep bigger indent for value:

.one
  background: linear-gradient(rgba(0, 0, 0, 0), black)
              linear-gradient(red, rgba(255, 0, 0, 0))

.two
  background:
    linear-gradient(rgba(0, 0, 0, 0), black)
    linear-gradient(red, rgba(255, 0, 0, 0))

Comments

SugarSS supports two types of comments:

/*
 Multiline comments
 */

// Inline comments

There is no “silent” comments in SugarSS. Output CSS will contain all comments from .sss source. But you can use postcss-discard-comments for Sass’s silent/loud comments behaviour.

Rule and Declarations

SugarSS separates selectors and declarations by :\s or :\n token.

So you must write a space after property name: color: black is good, color:black is prohibited.

Text Editors

• SublimeText: Syntax Highlighting for .SSS SugarSS
• Atom: language-postcss, source-preview-postcss and build-sugarss
• Vim: vim-sugarss

We are working on syntax highlight support in text editors.

Right now, you can set Sass or Stylus syntax highlight for .sss files.

Usage

Install SugarSS via npm:

npm install sugarss --save-dev

SugarSS to CSS

Just set SugarSS to PostCSS parser option and PostCSS will compile SugarSS to CSS.

Gulp:

var sugarss = require('sugarss');
var postcss = require('gulp-postcss');
var rename  = require('gulp-rename');

gulp.task('style', function () {
    return gulp.src('src/**/*.sss')
        .pipe(postcss(plugins, { parser: sugarss }))
        .pipe(rename({ extname: '.css' }))
        .pipe(gulp.dest('build'));
});

Webpack:

module: {
    loaders: [
        {
            test:   /\.sss/,
            loader: "style-loader!css-loader!postcss-loader?parser=sugarss"
        }
    ]
}

CLI:

postcss -u autoprefixer -p sugarss test.sss -o test.css

SugarSS to SugarSS

Sometimes we use PostCSS not to build CSS, but to fix source file. For example, to sort properties by postcss-sorting.

For this cases, use syntax option, instead of parser:

gulp.task('sort', function () {
    return gulp.src('src/**/*.sss')
        .pipe(postcss([sorting], { syntax: sugarss }))
        .pipe(gulp.dest('src'));
});

CSS to SugarSS

You can even compile existed CSS sources to SugarSS syntax. Just use stringifier option instead of parser:

postcss().process(css, { stringifier: sugarss }).then(function (result) {
    result.content // Converted SugarSS content
});

Imports

postcss-import doesn’t support .sss file extension, because this plugin implements W3C specification. If you want smarter @import, you should use postcss-easy-import with extensions option.

var postcssPlugin = [
  easyImport({ extensions: ['.sss'] })
]

Thanks

Cute project logo was made by Maria Keller.